<template>
  <a-modal
    :visible="action"
    @cancel="
      () => {
        $emit('setAction', false);
      }
    "
    :title="formName"
    ok-text="确认"
    cancel-text="取消"
    :afterClose="
      () => {
        $emit('setAction', false);
      }
    "
    @ok="
      classAction ? postPersonnel(formData) : putPersonnel(formData);
      $emit('setAction', false);
    "
  >
    <a-form
      ref="formRef"
      :model="formData"
      name="form_in_modal"
      labelAlign="right"
      v-bind="formItemLayout"
    >
      <a-form-item name="name" label="人员名称">
        <a-input
          v-model:value="formData.name"
          placeholder="请输入"
          @input="
            () => {
              $emit('setForm', formData);
            }
          "
        />
      </a-form-item>
      <a-form-item name="role" label="角色">
        <a-select
          ref="select"
          v-model:value="formData.role"
          style="width: 120px"
          placeholder="请选择"
        >
          <a-select-option :value="true">运营员</a-select-option>
          <a-select-option :value="false">维修员</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item name="phone" label="联系电话">
        <a-input v-model:value="formData.phone" placeholder="请输入" />
      </a-form-item>
      <a-form-item name="phone" label="负责区域">
        <a-select
          v-model:value="formData.region"
          mode="checkbox"
          placeholder="请选择"
          style="width: 100%"
          :options="
            filteredOptions.map((item) => ({
              label: item.name,
              value: item._id,
            }))
          "
        ></a-select>
      </a-form-item>
      <a-form-item name="head" label="头像">
        <a-upload
          v-model:file-list="formData.head"
          name="avatar"
          list-type="picture-card"
          class="avatar-uploader"
          :show-upload-list="false"
          action="http://localhost:3333/uploadfile"
          @change="callBack"
        >
          <img
            v-if="formData.head"
            :src="'http://localhost:3333/upload/' + formData.head"
            alt="avatar"
            :style="{ width: '120px', height: '120px' }"
          />
          <div v-else>
            <loading-outlined v-if="loading"></loading-outlined>
            <plus-outlined v-else></plus-outlined>
            <div class="ant-upload-text">Upload</div>
          </div>
        </a-upload>
      </a-form-item>
      <a-form-item name="action" label="状态">
        <a-checkbox v-model:checked="formData.status">Checkbox</a-checkbox>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import request from "@/request";
import { PlusOutlined, LoadingOutlined } from "@ant-design/icons-vue";
import { postPersonnel, putPersonnel } from "@/api/personnel";
import { onMounted, onUpdated, ref } from "vue";
export default {
  props: ["formName", "action", "formData", "classAction"],
  components: {
    PlusOutlined,
    LoadingOutlined,
  },
  setup(props, { emit }) {
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };
    onUpdated(() => {
      console.log(props.formData, 123123);
    });
    onMounted(() => {
      getData();
    });
    const filteredOptions = ref(["Apples", "Nails", "Bananas", "Helicopters"]);
    let callBack = (info) => {
      if (info.file.status == "done") {
        emit("setUpload", info.file.response.imgs);
        console.log(info.file.response.imgs);
      }
    };
    let getData = async () => {
      let {
        data: { data },
      } = await request({
        url: "http://localhost:3333/wen/areaSel",
        method: "get",
      });
      filteredOptions.value = data;
      console.log(data);
    };
    return {
      formItemLayout,
      filteredOptions,
      postPersonnel,
      putPersonnel,
      callBack,
    };
  },
};
</script>

<style>
.ant-row {
  width: 100%;
}
</style>